<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-ajax/core-ajax.html">
<!-- 
  `<post-service>` provides an API for a fake service -- 
  _unquote_, the read-only social networking service!

  Provides a very simple API: `posts` returns the list of posts.
  `setFavorite` pretends to persist a user's favorite choice.

  @element post-service
  @demo 
  @homepage http://www.polymer-project.org/docs/start/tutorial.html
-->

<!--
  An array of post objects, with the following format:

  <table border="0">
    <tr>
      <td><code>uid</code></td>
      <td>Number</td>
      <td>Unique ID for this post.</td>
    </tr>
     <tr>
      <td><code>username</code></td>
      <td>String</td>
      <td>Poster's username.</td>
    </tr>
    <tr>
      <td><code>avatar</code></td>
      <td>String</td>
      <td>URL for the user's avatar.</td>
    </tr>  
         <tr>
      <td><code>text</code></td>
      <td>String</td>
      <td>Post text.</td>
    </tr>  
    <tr>
      <td><code>favorite</code></td>
      <td>Boolean</td>
      <td>True if the current user favorited this post.</td>
    </tr>
  </table>
  
  @attribute posts 
  @type Array
  @default []
-->
<polymer-element name="post-service" attributes="posts">
  <template>
    <style>
    :host {
      display: none;
    }
    </style>
    <core-ajax id="ajax"
      auto
      url="posts.json"
      on-core-response="{{postsLoaded}}"
      handleAs="json">
    </core-ajax>
  </template>
  <script>
  Polymer('post-service', {
    created: function() {
      this.posts = [];
    },
    postsLoaded: function() {
      // Make a copy of the loaded data
      //alert(location.pathname);
      this.posts = this.$.ajax.response.slice(0);
      this.posts[0].favorite = true;
      this.posts[3].favorite = true;
    },
    /** 
     * Update the service with the current favorite value.
     * (Two-way data binding updates the favorite value 
     * stored locally.) If this was a real service, this
     * method would do something useful.
     * 
     * @method setFavorite
     * @param uid {Number} Unique ID for post.
     * @param isFavorite {Boolean} True if the user marked this post as a favorite.
     */
    setFavorite: function(uid, isFavorite) {
      this.posts[uid-1].favorite = isFavorite;
      // no service backend, just log the change
      console.log('Favorite changed: ' + uid + ", now: " + isFavorite);
    },
    
    setOneFavorite:function(index){
      if(this.posts[index]){
        this.posts[index].favorite = true;
      }
    }
  });
  </script>
</polymer-element>
